<template>
  <!-- 全球网络 -->
  <div class="global">
    <!-- 组件标题 -->
    <div class="title">
      <div class="text">全球网络</div>
      <!-- <p>庞大的律师集团体系，和全球16个沿线国家的律师事务所签署了一带一路战略法律服务合作框架协议</p> -->
    </div>
    <div class="global_search">
      <!-- <el-select v-model="service_value" placeholder="请选择">
        <el-option
          v-for="item in service_cate"
          :key="item.id"
          :label="item.title"
          :value="item.id"
          @change="handleChange3"
        ></el-option>
      </el-select> -->

<!--  popper-class="global_select" -->
      <el-select
       popper-class="global_select"
        v-model="office_value"
        :popper-append-to-body="false"
        placeholder="请选择"
         @change="global_searchChange"
      >
        <el-option
          v-for="item in office_list"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div class="global_box">
      <maps :index="index" :office_list="office_list"></maps>
      <!-- <div class="global_box_bg"></div>
      <div class="global_item shanghai"></div>
      <div class="global_item xuzhou"></div>
      <div class="global_item beijing"></div>-->
    </div>
    <router-link :to="{name:'zh_contactUs'}" class="more">
      <span>查看更多</span>
      <!-- 箭头背景 -->
      <i></i>
    </router-link>
  </div>
</template>
<script>
import maps from "./Maps";
import { office_list } from "@/api/contactUs.js";
export default {
  data() {
    return {
      office_list: [], //工作室地址
      office_value: "", //当前选中工作室地址
      serviceCate: [{ id: "" }], //专业领域列表
      index: null,
      popper_to_body: false
    };
  },
  components: {
    maps
  },
  created(){
     
  },
  mounted() {
    // 获取工作室地址
    this.getOffice_list();
  },
  methods: {
    // 获取工作室地址
    getOffice_list() {
      office_list({ field: 1 }).then(res => {
        console.log('工作室地址',res)
        this.office_list = res.data.data.CHS;
        this.office_value =   this.office_list[0].id;
        this.index = 0
      });
    },
    global_searchChange(e) {
      console.log(e)
      this.index = this.office_list.findIndex(
        item => item.id == this.office_value
      );
      
    }
  }
};
</script>
<style scoped src="./sass/home.css"></style>